<template>
  <div class="avatar-demo">
    <h1>用户头像功能演示</h1>
    
    <div class="demo-section">
      <h2>1. 默认头像（无fileName）</h2>
      <UserAvatar />
    </div>

    <div class="demo-section">
      <h2>2. 不同尺寸的头像</h2>
      <div class="avatar-sizes">
        <div class="avatar-item">
          <UserAvatar size="small" />
          <span>小尺寸</span>
        </div>
        <div class="avatar-item">
          <UserAvatar size="medium" />
          <span>中尺寸</span>
        </div>
        <div class="avatar-item">
          <UserAvatar size="large" />
          <span>大尺寸</span>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h2>3. 测试头像（需要先上传图片）</h2>
      <div class="test-avatar">
        <UserAvatar 
          :fileName="testFileName" 
          @load="handleAvatarLoad"
          @error="handleAvatarError"
        />
        <div class="avatar-info">
          <p>文件名: {{ testFileName || '无' }}</p>
          <p>状态: {{ avatarStatus }}</p>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h2>4. 上传头像测试</h2>
      <div class="upload-section">
        <input 
          type="file" 
          accept="image/*" 
          @change="handleFileChange"
          ref="fileInput"
        />
        <button @click="uploadAvatar" :disabled="!selectedFile">
          上传头像
        </button>
        <div v-if="uploadResult" class="upload-result">
          <p>上传结果: {{ uploadResult }}</p>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h2>5. 用户头像列表</h2>
      <div class="user-avatars">
        <div 
          v-for="user in testUsers" 
          :key="user.id" 
          class="user-item"
        >
                  <UserAvatar 
          :userId="user.userId" 
          size="small"
        />
          <span>{{ user.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import UserAvatar from '../components/UserAvatar.vue'
import { createTestUser, uploadImage } from '../api/image'

export default {
  name: 'AvatarDemo',
  components: {
    UserAvatar
  },
  setup() {
    const testFileName = ref('')
    const avatarStatus = ref('等待加载')
    const selectedFile = ref(null)
    const uploadResult = ref('')
    const fileInput = ref(null)

    // 测试用户数据
    const testUsers = reactive([
      { id: 1, name: '用户1', userId: null },
      { id: 2, name: '用户2', userId: 'test-user-2' },
      { id: 3, name: '用户3', userId: 'test-user-3' },
      { id: 4, name: '用户4', userId: 'non-existent-user' }
    ])

    const handleAvatarLoad = (url) => {
      avatarStatus.value = '加载成功'
      console.log('头像加载成功:', url)
    }

    const handleAvatarError = (error) => {
      avatarStatus.value = '加载失败，使用默认头像'
      console.error('头像加载失败:', error)
    }

    const handleFileChange = (event) => {
      selectedFile.value = event.target.files[0]
    }

    const uploadAvatar = async () => {
      if (!selectedFile.value) return

      try {
        uploadResult.value = '上传中...'
        
        // 先创建测试用户
        const userResponse = await createTestUser()
        const userId = userResponse.data.userId

        // 上传图片
        const formData = new FormData()
        formData.append('file', selectedFile.value)
        formData.append('userId', userId)
        formData.append('description', '用户头像')
        formData.append('tags', 'avatar')

        const response = await uploadImage(formData)
        testFileName.value = response.data.fileName
        uploadResult.value = `上传成功！文件名: ${response.data.fileName}`
        
        // 清空文件选择
        if (fileInput.value) {
          fileInput.value.value = ''
        }
        selectedFile.value = null
      } catch (error) {
        uploadResult.value = `上传失败: ${error.message}`
        console.error('上传失败:', error)
      }
    }

    return {
      testFileName,
      avatarStatus,
      selectedFile,
      uploadResult,
      fileInput,
      testUsers,
      handleAvatarLoad,
      handleAvatarError,
      handleFileChange,
      uploadAvatar
    }
  }
}
</script>

<style scoped>
.avatar-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.demo-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.demo-section h2 {
  margin-top: 0;
  color: #333;
}

.avatar-sizes {
  display: flex;
  gap: 20px;
  align-items: center;
}

.avatar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.test-avatar {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar-info {
  font-size: 14px;
  color: #666;
}

.upload-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
}

.upload-section button {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.upload-section button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.upload-result {
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
  font-size: 14px;
}

.user-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}
</style> 